<template>
  <div @click="handleClick">
    <!-- vue视图文件 .vue -->
    {{ msg }}
    <input type="text" v-model="value" @keyup.enter="handleInputEnter" />
    <ul>
      <!-- 用唯一值去绑定一个key值，可以提升项目运行效率 -->
      <li class="active" v-for="item in list" :key="item.id">
        <span class="iconfont icon-xiangshangjiantou"></span>
        <span class="img-item">
          <img src="./assets/icon_png/weiwancheng.jpeg" alt="" />
        </span>
        <span>{{ item.value }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // data必须是函数
  data() {
    return {
      msg: 'hello Vue',
      value: '',
      list: [
        {
          id: 1,
          value: '一起去看电影吧',
          check: false,
        },
        {
          id: 2,
          value: '疫情解封干什么？',
          check: false,
        },
      ],
    }
  },
  methods: {
    handleClick() {
      console.log('this.msg', this.msg)
    },
    handleInputEnter() {
      console.log(this.value)
      this.list.push({
        id: Date.now(),
        value: this.value,
        check: false,
      })
      this.value = ''
    },
  },
}
</script>

<style lang="scss">
.active {
  list-style: none;
  margin: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}
.img-item {
  width: 30px;
  height: 30px;
  img {
    width: 30px;
    height: 30px;
  }
}
</style>
